<template>
  <div class="shop">
    <el-form ref="form"
        :model="form">
    <el-form-item label="员工角色:">
      <el-select
          style="width:140px;"
          v-model="form.role"
          filterable
          size='mini'
          placeholder="请选择员工角色"
        >
       <el-option
            v-for="item in roleList"
            :key="item.id"
            :label="item.name"
            :value="item.id"
          ></el-option>
      </el-select>
    </el-form-item>
    </el-form>

     <div class="input_info">
      <el-input class="staff_input" size="small" v-model="form.staffname" placeholder="输入员工名称搜索" clearable></el-input>
       <el-input class="staff_input" size="small" v-model="form.title" placeholder="输入门店名称搜索" clearable></el-input>
      <el-button class="input_btn" size="small" type="primary" @click="searchShopStaff">搜索</el-button>
    </div>


    <el-table :data="tableData"
      style="width:100%"
      max-height="600"
      :cell-style="tc"
      :header-cell-style="tccolor">
      <el-table-column prop ='ID' label='员工ID'></el-table-column>
      <el-table-column prop ='nickname' label='员工昵称'></el-table-column>
      <el-table-column prop ='account' label='员工账号'></el-table-column>
      <el-table-column prop ='ownshop' label='所属门店'></el-table-column>
      <el-table-column prop ='rolename' label='角色名称'></el-table-column>
      <el-table-column  label='操作' fixed ='right' width='160'>
        <template slot-scope="scope">
          <el-button type='primary' size='mini' @click='openShopStaffDetail(scope.row.id)'>详情</el-button>
        <el-button  size='mini' @click='deleteShopStaff(scope.row.id)'>移除</el-button>
        </template>
      </el-table-column>
      </el-table>

       <el-col :span="24">
      <div class="pagination">
        <el-pagination background
          @current-change="pageChange"
          :current-page="form.page"
          :page-size="form.size"
          layout="total, prev, pager, next, jumper"
          :total="total"></el-pagination>
      </div>
    </el-col>


     <!--员工详情-->
     <jdialog title="员工详情"
      :visible.sync="showStaffDetail"
      width="800px">
     <el-row class="staff_info">
       <el-col :span='12'>员工昵称：区丽丽</el-col>
       <el-col :span='12'>联系电话：13968008864</el-col>
     </el-row>

     <el-row class="staff_info">
       <el-col :span='12'>所属店铺：星巴克（滨江店）</el-col>
       <el-col :span='12'>创建时间：2019-01-10 18:00</el-col>
     </el-row>
    
     <!-- <el-row class="staff_info">
       <el-col :span='24' class="staff-col"><p class="staff_al">权限清单：</p>
         <div class="active-title ">活动管理</div>
      <el-checkbox label="活动创建" name="role"></el-checkbox>
      <el-checkbox label="活动数据查看" name="role"></el-checkbox>
       </el-col>
       <el-col :span='24'>
      <div class="active-title active_subtitle">爆品管理</div>
      <el-checkbox label="爆品创建" name="role"></el-checkbox>
      <el-checkbox label="爆品数据查看" name="role"></el-checkbox>
       </el-col>
       <el-col :span='24'>
      <div class="active-title active_subtitle">现金券</div>
      <el-checkbox label="现金券创建" name="role"></el-checkbox>
      <el-checkbox label="现金券数据查看" name="role"></el-checkbox>
       </el-col>
       <el-col :span='24'>
      <div class="active-title active_subtitle">满减券</div>
      <el-checkbox label="满减券创建" name="role"></el-checkbox>
      <el-checkbox label="满减券数据查看" name="role"></el-checkbox>
       </el-col>
       <el-col :span='24'>
      <div class="active-title active_subtitle">核销</div>
      <el-checkbox label="券码核销" name="role"></el-checkbox>
       </el-col>
       
     </el-row> -->
      <div class="class_btn">
        <el-button size="mini"
          type="primary"
          @click="certainAddStaffRole">确定</el-button>
        <el-button size="mini"
          @click="showStaffDetail = false">取消</el-button>
      </div>
    </jdialog>
  </div>
</template>

<script>
  export default {
    data (){
       return {
         form:{
            role:'',
            staffname:'',
            page:1,
            size:10,
         },
         roleList:[{id:'1',name:'全部'},{id:'0',name:'普通员工'}],
         tableData:[{'ID':'10001','nickname':'海阔天空','account':'15259457815','ownshop':'迎晚部落便利店','rolename':'普通员工'},{'ID':'10001','nickname':'海阔天空','account':'15259457815','ownshop':'迎晚部落便利店','rolename':'店长经理'}],
         total:0,


         showStaffDetail:false
       }
    },
    mounted (){

    },
    methods: {
     
     searchShopStaff(){

     },
     pageChange(page){
       this.form.page = page
       //刷新数据

     },
     openShopStaffDetail(id){
       console.log(id)
       this.showStaffDetail = true
     },
     certainAddStaffRole(){
       this.showStaffDetail = false
     },
     deleteShopStaff(id){
       this.$confirm("确定删除该员工?", "温馨提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      }).then(() => {
        //删除员工角色
        console.log(id)
      }).catch(() => {
        console.log('cancel')
      });
     },
      tc () {
      return "text-align:center; color:#333333; font-size:12px;";
    },
    tccolor () {
      return "text-align:center;background-color:#f5f5f5; font-size:14px;";
    },
    }
  }
</script>

<style lang="scss" scoped>
.shop{
  padding: 20px;
  position: relative;
  .input_info{
    position: absolute;
    top: 20px;
    right:20px;
    // width: 300px;
  }
  .staff_al{
    float: left;
  }
  .staff_input{
    float: left;
    width:150px;
    margin-right: 12px;
    margin-top: 6px;
  }
  .input_btn{
    float: right;
    margin-top: 5px;
  }
  .pagination{
    float: right;
    margin-top: 15px;
  }
  .staff_info{
    padding: 20px;
    margin-right:300px;
  }
  .active-title{
    float: left;
    width: 100px;
    height: 28px;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 28px;
    color: #666666;
    margin: 0 12px 10px 20px;
  }
  .active_subtitle{
    margin: 0px 12px 10px 90px;
  }
  .class_btn {
    margin-top: 20px;
    margin-bottom: 20px;
    text-align: center;
  }
  .staff-col{
    margin-top: 10px;
  }
}
</style>